
    <NoticeBar
      *ngIf="!isMobile"
      style="margin-bottom: 10px"
      [option]="{ content: '该组件只支持Touch事件，请使用移动模式/设备打开此页。', marqueeProps: { fps: 100 } }"
    ></NoticeBar>
    <br />
    <List>
      <SwipeAction style="background-color: gray" [right]="right" [left]="left" (onOpen)="open()" (onClose)="close()">
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="click()">
          Have left and right buttons
        </ListItem>
      </SwipeAction>

      <SwipeAction
        style="background-color: gray"
        [autoClose]="true"
        [left]="left"
        (onOpen)="open()"
        (onClose)="close()"
      >
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="click()">
          Only left buttons
        </ListItem>
      </SwipeAction>

      <SwipeAction
        style="background-color: gray"
        [autoClose]="true"
        [right]="right"
        (onOpen)="open()"
        (onClose)="close()"
      >
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="click()">
          Only right buttons
        </ListItem>
      </SwipeAction>

      <SwipeAction
        style="background-color: gray"
        [autoClose]="true"
        [right]="rightDifferentWidth"
        (onOpen)="open()"
        (onClose)="close()"
      >
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="click()">
          Different button width
        </ListItem>
      </SwipeAction>

      <SwipeAction
        style="background-color: gray"
        [autoClose]="true"
        [right]="right"
        (onOpen)="open()"
        (onClose)="close()"
      >
        <ListItem [extra]="'More'" [arrow]="'horizontal'" (onClick)="itemClick()">
          List.Item with onClick
        </ListItem>
      </SwipeAction>
    </List>
  